<template>
  <div class="activity-add-price">
    <div class="nav-wrap">
      <div style="flex:1;overflow-x:hidden; background-color: #fff">
        <ul class="nav-bar-wrap" ref="nav">
          <li
            v-for="tabItem in tabList"
            :key="tabItem.id"
            :class="activeNav === tabItem.id ? 'active' : ''"
            @click="changeNav(tabItem.id)"
          >
            {{ tabItem.name }}
          </li>
        </ul>
      </div>
      <div class="search-wrap" @click="goSearch">
        <i class="icon-search"></i>
        <p>搜索品牌</p>
      </div>
    </div>
    <sortTab />
    <div>
      <activity-list @onAddPrice="handleAddPrice" :list="[1, 2, 3, 4]" />
    </div>
    <add-price-popup ref="addPricePopup" activityId="123" />
  </div>
</template>

<script>
import activityList from './activityList.vue';
import addPricePopup from './addPricePopup.vue';
import sortTab from './sortTab.vue';

export default {
  name: 'activityAddPrice',
  components: {
    activityList,
    addPricePopup,
    sortTab
  },
  data() {
    return {
      activeNav: 1,
      tabList: [
        {
          id: 1,
          name: '全部'
        },
        {
          id: 2,
          name: '爆款'
        },
        {
          id: 3,
          name: '女装'
        },
        {
          id: 4,
          name: '男装'
        },
        {
          id: 5,
          name: '海淘'
        },
        {
          id: 6,
          name: '严选'
        }
      ]
    };
  },
  methods: {
    changeNav(curId) {
      this.activeNav = curId;
    },
    handleAddPrice(v) {
      console.log(v);
      this.$refs.addPricePopup.showDialog();
    },
    goSearch() {
      // this.$router.push('/shop/add-price-activity-search');
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.activity-add-price {
  background-color: #f5f5f5;
  .nav-wrap {
    height: 0.84rem;
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;
    background-color: #fff;

    .search-wrap {
      width: 1.4rem;
      margin-left: 0.2rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 0.2rem;
      box-shadow: -2px 0 6px -2px #cdcdcd;

      i {
        width: 0.26rem;
        height: 0.26rem;
        background: url('../../../assets/addPrice/icon-search.png') no-repeat;
        background-size: 100% 100%;
      }
      p {
        font-size: 0.2rem;
        color: #666666;
        margin-top: 0.04rem;
        transform: scale(0.83);
      }
    }
    .nav-bar-wrap {
      height: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      background: #fff;
      white-space: nowrap;
      display: flex;
      overflow: -moz-scrollbars-none;
      -webkit-overflow-scrolling: touch;
      padding-left: 0.12rem;

      &::-webkit-scrollbar {
        display: none;
      }

      li {
        float: left;
        padding: 0 0.22rem;
        font-size: 0.28rem;
        height: 100%;
        font-weight: 400;
        text-align: center;
        color: #666666;
        line-height: 0.84rem;
        position: relative;

        &.active {
          color: #e62525;
          &:after {
            content: '';
            display: block;
            width: 0.6rem;
            height: 0.04rem;
            background: #e62525;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -0.3rem;
          }
        }
      }
    }
  }
}
</style>
